<template>
  <view class="evaluate">
    <view class="navs">
      <navigator url="/pages/my/index" open-type="switchTab" hover-class="none">
        <u-icon name="arrow-leftward"></u-icon>
      </navigator>
      <view class="sear"> 我的评价</view>
      <navigator
        url="/pages/cart/index"
        open-type="switchTab"
        hover-class="none"
      >
        <u-icon name="/static/fenx.jpg"></u-icon>
      </navigator>
    </view>
    <view class="rate-item" v-for="(item, i) in rateList" :key="i">
      <view class="r-tle">
        <view class="r-lf">
          <image
            src="https://img95.699pic.com/xsj/0o/bs/q1.jpg%21/fh/300"
            mode="widthFix"
            style="width: 30px; height: 30px; border-radius: 15px"
          ></image>
          <view>{{ item.title }}</view>
          <view @click="goDetail(item.id)"
            ><u-icon name="arrow-right"></u-icon
          ></view>
        </view>
        <view class="r-lg">
          <view @click="shows" :class="{ more: isShow }">更多</view>
          <view v-if="isShow" @click="dels">删除该评论</view>
        </view>
      </view>
      <view class="r-con">
        <view class="time">发布于4月2日</view>
        <view class="rates">
          <u-rate
            active-color="#FFAA1A"
            gutter="8"
            v-model="value"
            disabled
          ></u-rate>
        </view>
        <view class="r-zk">
          <view class="r-pj">
            {{ item.content }}
          </view>
          <view class="zk" v-if="isOpen || showExpandButton" ref="content">
            <text @tap="toggleExpand">{{ isOpen ? "展开" : "收起" }}</text>
            <u-icon name="arrow-down" color="#BBBBBB"></u-icon>
          </view>
          <view class="r-more" v-if="showExpandButton">
            用户评价用户评价用户评价用户评价用户评价用户评价
          </view>
        </view>
        <view class="imgs">
          <image
            src="https://img95.699pic.com/xsj/2l/va/x4.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast"
            mode="scaleToFill"
            class="img"
          ></image>
        </view>
      </view>
      <view class="r-price">
        <view class="p-lf">
          <view class="">浏览<text>100</text></view>
        </view>
        <view class="p-rg">
          <view class="p-line">
            <u-icon name="heart-fill" color="#D8D8D8"></u-icon>
            <text>100</text>
          </view>
          <view class="p-line">
            <u-icon name="/static/msgs.jpg"></u-icon>
            <text>100</text>
          </view>
        </view>
      </view>
      <u-divider></u-divider>
    </view>
    <view class="btn">
      <u-button
        type="primary"
        color="#ffaa19"
        shape="circle"
        text="提交"
        @click="goConfirm"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: "evaluate",
  components: {},
  data: () => ({
    isShow: false,
    value: 5,
    rateList: [
      {
        id: 1,
        title: "幸福农庄",
        content: "很棒，非常不错，推荐常来",
      },
      {
        id: 2,
        title: "幸福农庄",
        content:
          "很棒，非常不错，推荐常来 一切尽在图里了 老板很热情很棒，非常不错，推荐常来 一切尽在图里了 老板很热情",
      },
    ],
    isOpen: false,
    showExpandButton: false, // 是否显示展开按钮
    content: "用户评价用户评价用户评价用户评价用户评价用户评价",
    elData: [],
  }),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  mounted() {
    // 监听页面加载完成后的事件，计算内容高度并判断是否显示展开按钮
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .selectAll(".r-pj")
        .boundingClientRect((rects) => {
          rects.forEach((rect) => {
            console.log("Height1:", rect.height);
            if (rect.height > 30) {
              this.isOpen = true;
              console.log(this.isOpen, "this.isOpen");
            }
          });
        })
        .exec();
    });
  },
  // 方法集合
  methods: {
    shows() {
      this.isShow = !this.isShow;
    },
    dels() {
      console.log("删除");
    },
    toggleExpand() {
      this.isOpen = !this.isOpen;
      this.showExpandButton = !this.showExpandButton;
      console.log(this.isOpen, "this.isOpen");
    },
    load() {
      this.$refs.uReadMore.init();
    },
    goConfirm() {
      uni.switchTab({
        url: "/pages/my/index",
      });
    },
    goDetail(id) {
      uni.navigateTo({
        url: "/packageB/productdetails/productdetails?id=" + id,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.evaluate {
  font-family: "Poppins";

  background-color: #f9f9f9;
  //   position: absolute;
  //   width: 100%;
  //   height: 100%;
  .navs {
    padding-top: 100rpx;
    margin: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .rate-item {
    width: 90%;
    margin: 20rpx auto;
    font-size: 26rpx;
    .r-tle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .r-lf {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 40%;
      }
      .r-lg {
        color: #adadad;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        // font-size: 30rpx;
        .more {
          border-bottom: 1px solid #adadad;
        }
      }
    }
    .rates ::v-deep .u-icon__icon {
      color: #ffaa1a !important;
      margin-bottom: 10rpx;
    }
    .r-con {
      .time {
        color: #adadad;
        margin: 10rpx 10rpx;
      }
      .imgs {
        margin: 20rpx 0;
        .img {
          width: 250rpx;
          height: 250rpx;
          border-radius: 10rpx;
        }
      }
      .r-zk {
        position: relative;
        .r-pj {
          width: 100%;
          //   display: -webkit-box;
          //   -webkit-box-orient: vertical;
          //   -webkit-line-clamp: 2;
          //   overflow: hidden;
        }
        .zk {
          position: absolute;
          right: 0;
          bottom: -46rpx;
          color: #adadad;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
    }
    .r-price {
      color: #adadad;
      display: flex;
      justify-content: space-between;
      .p-rg {
        display: flex;
        .p-line {
          display: flex;
          margin-right: 10rpx;
        }
      }
    }
  }

  .btn {
    margin: 100rpx auto;
    padding-bottom: 40rpx;
    width: 90%;
  }
}
</style>